<template>
  <div v-show="$route.name == 'order-detail'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/order-list' }">订单列表</el-breadcrumb-item>
    <el-breadcrumb-item>订单信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域--订单数据修改 -->
    <el-card>
      <div style="margin-bottom: 20px;">订单信息</div>
      <el-form :model="orderForm" ref="orderForm" label-width="110px" class="demo-orderForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="日期" prop="date">
              <el-date-picker type="date" placeholder="选择日期" v-model="orderForm.date" value-format='yyyy-MM-dd' disabled>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="customer">
              <el-select v-model="orderForm.customer" placeholder="请选择名称" clearable popper-class="dropdownbox" filterable disabled>
                <el-option v-for="element in customerList"
                  :label="element.company"
                  :value="element.company">
                  <span style="float: left">{{ element.company }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width:90%" label="客户地址" prop="address">
              <el-input v-model="orderForm.address" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人" prop="cname">
              <el-input v-model="orderForm.cname" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="orderForm.phone" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结算方式" prop="js">
              <el-radio-group v-model="orderForm.js" disabled>
                <el-radio label="赊销">赊销</el-radio>
                <el-radio label="现金">现金</el-radio>
                <el-radio label="银行存款">银行存款</el-radio>
                <el-radio label="预付">预付</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="邮费" prop="yf">
              <el-input-number v-model="orderForm.yf" :precision="2" :min="0" controls-position="right" disabled></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安装费" prop="azf">
              <el-input-number v-model="orderForm.azf" :precision="2" :min="0" controls-position="right" disabled></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安装日期" prop="installtime">
              <el-date-picker type="date" placeholder="选择日期" v-model="orderForm.installtime" value-format='yyyy-MM-dd' disabled>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安装时间" prop="itime">
              <el-time-picker
                v-model="orderForm.itime"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                disabled
                placeholder="任意时间点"
                value-format='HH:mm:ss'>
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否需要发票" prop="invoice">
              <el-radio-group v-model="orderForm.invoice" disabled>
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否含税" prop="tax">
              <el-radio-group v-model="orderForm.tax" disabled>
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否普伟客户" prop="ispw">
              <el-radio-group v-model="orderForm.ispw" disabled>
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 卡片视图区域--详情数据修改 -->
    <el-card style="margin-top: 10px;">
      <div style="margin-bottom: 20px;">单品信息</div>
      <el-table :data="orderForm.details" border>
        <el-table-column label="类别" prop="product" align="center" min-width="85"></el-table-column>
        <el-table-column label="产品名称" prop="productn" align="center" min-width="160"></el-table-column>
        <el-table-column label="规格" prop="model" align="center" min-width="160"></el-table-column>
        <el-table-column label="新旧" prop="new" min-width="60" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.new ? '新' : '旧'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="price" min-width="110" align="center"></el-table-column>
        <el-table-column label="成本" prop="cost" min-width="110" align="center" v-if="role === 1 || role === 3 || role === 4"></el-table-column>
        <el-table-column label="数量" prop="amoumt" align="center" min-width="100"></el-table-column>
        <el-table-column label="折扣" prop="discount" align="center" min-width="100"></el-table-column>
        <el-table-column label="总价" prop="tprice" min-width="120" align="center"></el-table-column>
        <el-table-column label="实收" prop="paid" align="center" min-width="120"></el-table-column>
        <el-table-column label="应收" prop="npaid" align="center" min-width="120"></el-table-column>
        <el-table-column label="已回款" prop="is_repayment" align="center" min-width="120">
          <template slot-scope="scope">
            <div>{{scope.row.is_repayment ? '是' : '否'}}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 序列号 -->
    <el-card style="margin-top: 10px;">
      <div style="margin-bottom: 20px;">单品序列号</div>
      <el-table :data="serialList" border>
        <el-table-column type="index" width="50" align="center"></el-table-column>
        <el-table-column label="类别" prop="product" align="center" min-width="85"></el-table-column>
        <el-table-column label="产品名称" prop="productn" align="center" min-width="160"></el-table-column>
        <el-table-column label="规格" prop="model" align="center" min-width="160"></el-table-column>
        <el-table-column label="序列号" prop="serial_number" align="center" min-width="160"></el-table-column>
      </el-table>
      <el-button @click="back" style="margin-top: 20px;">返回</el-button>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      order_id: '',
      customerList: [],
      orderForm: {},
      serialList: {}
    }
  },
  mounted() {
    this.getCustomerList()
    this.getOrderData()
  },
  methods: {
    // 获取客户数据
    async getCustomerList() {
      const { data: result } = await this.$http.post('/api-customer')
      this.customerList = result.data
    },
    getOrderData() {
      if (this.$route.name === 'order-detail') {
        if (this.$route.params.order_id) {
          this.order_id = this.$route.params.order_id
          localStorage.setItem('OrderId', this.$route.params.order_id)
        } else {
          this.order_id = localStorage.getItem('OrderId')
        }
        this.getOrder()
        this.getOrderSerial()
      }
    },
    async getOrderSerial() {
      const { data: result } = await this.$http.get('/order-serial/' + this.order_id)
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      // 序列号数据
      this.serialList = result.data
    },
    // 获取订单数据
    async getOrder() {
      // 发起编辑的网络请求
      const { data: result } = await this.$http.get('/order-oid/' + this.order_id)
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      // 订单数据
      this.orderForm = result.data
    },
    // 返回
    back() {
      this.$router.push({ 'name': 'order-list' })
    },
  }
}
</script>
